// createRouter 是用来创建路由对象的方法
// createWebHistory 创建路由模式的方法,History 模式，路径使用的是 / 开头，一般要配合
// 后端服务器进行使用，容易产生 404,因为一旦路径有一些文件就到导致找不到页面
// createWebHashHistory  创建路由模式的方法，Hash 前面使用的是 # 开头，不许后端配合，使用更安全
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 导入路由页面
import HomeView from '../views/HomeView.vue'


// 导入管理员和用户的组件
import ManagerIndexView from '@/views/manager/ManagerIndexView.vue'
import ManagerListView from '@/views/manager/ManagerListView.vue'
import UserListView from '@/views/manager/UserListView.vue'

// 轮播图管理
import BannerIndexView from '@/views/banner/BannerIndexView.vue'
import BannerListView from '@/views/banner/BannerListView.vue'
import AddBannerView from '@/views/banner/AddBannerView.vue'

// 商品管理
import ProIndexView from '@/views/pro/ProIndexView.vue'
import ProListView from '@/views/pro/ProListView.vue'
import AddProView from '@/views/pro/AddProView.vue'


// 图表管理
import EchartsIndexView from '@/views/echarts/EchartsIndexView.vue'
import EchartsShowView from '@/views/echarts/EchartsShowView.vue'

// 文件管理
import ExcelIndexView from '@/views/excel/ExcelIndexView.vue'
import ExcelImportView from '@/views/excel/ExcelImportView.vue'
import ExcelExportView from '@/views/excel/ExcelExportView.vue'


// 富文本编辑器
import EditorIndexView from '@/views/editor/EditorIndexView.vue'
import EditorShowView from '@/views/editor/EditorShowView.vue'


// 地图管理
import MapIndexView from '@/views/map/MapIndexView.vue'
import MapShowView from '@/views/map/MapShowView.vue'





// 路由规则
export const routes = [
  {
    // path 页面路径
    path: '/',
    // name 路由的名称，给路由起一个 别名
    name: 'home',
    label: '首页',
    // 当前路由所对应的页面，当前路径访问时要打开的页面
    component: HomeView,
    // 路由嵌套，配置二级路由
    children: [
      {
        // 除了一级路由，其他二级或者三级路由全部都不需要使用 / 开头
        path: 'manager',
        name: 'manager',
        label: '账号管理',
        icon: 'UserFilled',
        component: ManagerIndexView,
        // 配置三级路由
        children: [
          {
            path: 'managerList',
            name: 'managerList',
            label: '管理员列表',
            icon: 'UserFilled',
            component: ManagerListView,
          }, {
            path: 'userList',
            name: 'userList',
            label: '用户列表',
            icon: 'UserFilled',
            component: UserListView,
          }
        ]
      },
      {
        path: 'banner',
        name: 'banner',
        label: '轮播图管理',
        icon: 'PictureFilled',
        component: BannerIndexView,
        // 配置三级路由
        children: [
          {
            path: 'bannerList',
            name: 'bannerList',
            label: '轮播图列表',
            icon: 'UserFilled',
            component: BannerListView,
          }, {
            path: 'addBanner',
            name: 'addBanner',
            label: '添加轮播图',
            icon: 'UserFilled',
            component: AddBannerView,
          }
        ]
      }, {
        path: 'pro',
        name: 'pro',
        label: '商品管理',
        icon: 'Goods',
        component: ProIndexView,
        // 配置三级路由
        children: [
          {
            path: 'proList',
            name: 'proList',
            label: '商品列表',
            icon: 'UserFilled',
            component: ProListView,
          }, {
            path: 'addPro',
            name: 'addPro',
            label: '添加商品',
            icon: 'UserFilled',
            component: AddProView,
          }
        ]
      }, {
        path: 'excel',
        name: 'excel',
        label: '文件管理',
        icon: 'Folder',
        component: ExcelIndexView,
        // 配置三级路由
        children: [
          {
            path: 'excelImport',
            name: 'excelImport',
            label: '文件导入',
            icon: 'UserFilled',
            component: ExcelImportView,
          }, {
            path: 'excelExport',
            name: 'excelExport',
            label: '文件导出',
            icon: 'UserFilled',
            component: ExcelExportView,
          }
        ]
      }, {
        path: 'echarts',
        name: 'echarts',
        label: '图表管理',
        icon: 'DataLine',
        component: EchartsIndexView,
        // 配置三级路由
        children: [
          {
            path: 'echartsShow',
            name: 'echartsShow',
            label: 'echarts图表',
            icon: 'UserFilled',
            component: EchartsShowView,
          }
        ]
      }, {
        path: 'editor',
        name: 'editor',
        label: '富文本管理',
        icon: 'Edit',
        component: EditorIndexView,
        // 配置三级路由
        children: [
          {
            path: 'editorShow',
            name: 'editorShow',
            label: '富文本编辑器',
            icon: 'UserFilled',
            component: EditorShowView,
          }
        ]
      }, {
        path: 'map',
        name: 'map',
        label: '地图管理',
        icon: 'Location',
        component: MapIndexView,
        // 配置三级路由
        children: [
          {
            path: 'mapShow',
            name: 'mapShow',
            label: '百度地图',
            icon: 'UserFilled',
            component: MapShowView,
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由懒加载，对于一些不确定是否需要立即使用或者显示的页面，可以使用路由懒加载
    component: () => import('../views/LoginView.vue')
  }
]


// 创建路由对象
const router = createRouter({
  // 配置路由模式
  // import.meta.env.BASE_URL 设置文件的目录
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // routes 是路由的规则定义
  routes
})

// 导出路由对象
export default router
